
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/>
	<title>canvas测试</title>
	<style>
		body{
			background: #000;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="1200" height="700"></canvas>

</body>
</html>
<script src="particles.js"></script>
<script>
	/*
		 * parameters
		 * canvasId: 画布id，必填
		 * imgUrl: 纯色图片的路径，可以是jpg或者png，做粒子动画的图案色值应为#000，必填
		 * cols/rows：分别代表图案每一行和每一列显示粒子数，此处需要设定的cols和rows要可被图片width和height整除，必填
		 * startX/startY: 粒子起始位置x,y  
		 * imgX/imgY: 图片左上角坐标，相对canvas左上角的偏移值
		 * delay: 延迟执行动画时间，单位ms
		 * duration: 持续时间，单位ms
		 * fillStyle: 粒子颜色值，可带半透明
		 * particleOffset：粒子偏移值
		 * ease: 缓动函数 提供linear，Quad，Cubic，Quart，Quint，Sine，Expo，Circ，Elastic，Back 包含easeIn,easeOut,easeInOut
		 * interval: 粒子间开始移动间隔
		 */
		var particles = new Particles({
			canvasId: 'myCanvas',
			imgUrl: 'logo.png',
			cols: 100,
			rows: 100,
			startX: 650,
			startY: 500,
			imgX: 500,
			imgY: 130,
			delay: 100,
			duration: 2000,
			interval: 10,
			fillStyle: '#ffa900',
			particleOffset: 2,
			ease: 'easeInOutExpo'
		});
		particles.animate();



</script>